<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    commentPageListService,
    addCommentService, deleteCommentService
} from "@/api/comment"
import { ref } from 'vue'
import {
    Delete
} from '@element-plus/icons-vue'
import TextEditor from '@/component/TextEditor.vue'

const comment = ref([
    {
        "id": 1,
        "type": "0",
        "titleId": 1,
        "pid": -1,
        "content": "评论内容",
        "toCommentUserId": -1,
        "toCommentUserName": "zhangsan",
        "createBy": 1,
        "username": "zhangsan",
        "createTime": ""
    }
])
//条件搜索模型
const titleId = ref(undefined);
const type = ref(undefined);
const typeOptions = [
{
    value: '0',
    label: '文章评论'
},
{
    value: '1',
    label: '说说评论'
}]

//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

const commentList = async () => {
    let params = {
        page: page.value,
        pageSize: pageSize.value,
        type: type.value ? type.value : null,
        titleId: titleId.value ? titleId.value : null,
    }
    let result = await commentPageListService(params)

    //渲染视图
    total.value = result.data.total;
    console.log(result.data.records)
    comment.value = result.data.records;
}
//调用函数查询
commentList();
//当每页条数发生了变化，调用此函数
const handleSizeChange = (size: number) => {
    pageSize.value = size
    commentList();
}
//当前页码发生变化，调用此函数
const handleCurrentChange = (num: number) => {
    page.value = num
    commentList();
}

//添加评论表单模型
const commentForm = ref({
    type: undefined,
    titleId: undefined,
    pid: -1,
    content: "",
    toCommentUserId: -1,
})
//添加评论的表单校验模型
const Rules = ref({
    type: [
        { required: true, message: '请选择评论类型', trigger: 'blur' }
    ],
    titleId: [
        { required: true, message: '请输入要评论的标题编号', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '请输入评论内容', trigger: 'blur' }
    ]
})

//默认不显示抽屉
const visibleDrawer = ref(false)
//为抽屉添加响应数据
const addCommentRef = ref()
//后台调用添加用户接口
const onAdd = async () => {
    //点击添加按钮后再进行二次校验
    await addCommentRef.value?.validate().catch((err: any) => { ElMessage.error("校验失败"); return Promise.reject(err) })
    let result = await addCommentService(commentForm.value) as any;
    ElMessage.success(result.msg ? result.msg : '添加成功')
    //让抽屉消失
    visibleDrawer.value = false
    clearCommentForm()
    //刷新列表
    commentList();
}
//刷新抽屉表单
const clearCommentForm = () => {
    commentForm.value = {
        type: undefined,
        titleId: undefined,
        pid: -1,
        content: "",
        toCommentUserId: -1
    }
}
//取消添加
const cancelDrawer = () => {
    visibleDrawer.value = false
}

//删除
const deleteComment = (row: { id: any }) => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let result = await deleteCommentService(row.id) as any;
            ElMessage({
                type: 'success',
                message: result.msg ? result.msg : '删除成功',
            })
            commentList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>评论管理</span>
                <div>
                    <el-button type="primary" @click="visibleDrawer = true;">添加评论</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item prefix-icon="name" label="评论类型：">
                <el-select v-model="type" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            </el-form-item>
            <el-form-item prefix-icon="name" label="评论标题编号：">
                <el-input v-model="titleId" placeholder="请输入评论所属的标题编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="commentList()">搜索</el-button>
                <el-button @click="type = undefined,titleId = undefined">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 评论列表 -->
        <el-table :data="comment" style="width: 100%">
            <el-table-column label="序号" width="100">
                <template v-slot="scope">
                    <!-- 序号实现自动增加且连续 -->
                    {{ (page - 1) * pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="评论类型" prop="type" show-overflow-tooltip width="120">
                <template v-slot="scope">{{ scope.row.type === '0' ? '文章评论' : '说说评论' }}</template>
            </el-table-column>
            <el-table-column align="center" label="评论所属标题编号" prop="titleId" width="140"></el-table-column>
            <el-table-column align="center" label="父评论编号" prop="pid" width="120">
                <template v-slot="scope">{{ scope.row.pid === -1 ? '无' : scope.row.pid }}</template>
            </el-table-column>
            <el-table-column label="评论内容" show-overflow-tooltip prop="content" width="200">
                <template v-slot="scope">
                    <div v-html="scope.row.content"></div>
                </template>
            </el-table-column>
            <el-table-column label="父评论用户名" prop="toCommentUserName" show-overflow-tooltip width="120">
                <template v-slot="scope">{{ scope.row.toCommentUserName === null ? '无' : scope.row.toCommentUserName }}</template>
            </el-table-column>
            <el-table-column label="发布人" prop="username" width="120"></el-table-column>
            <el-table-column label="发布时间" prop="createTime" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button :icon="Delete" plain type="danger" @click="deleteComment(row)">删除</el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" background
            layout="sizes,prev, pager,next,jumper,total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="total">
        </el-pagination>

        <!-- 抽屉中嵌套添加表单 -->
        <el-drawer v-model="visibleDrawer" title="添加评论" direction="rtl" destroy-on-close size="45%">
            <div>
                <el-form ref="addArticleRef" :model="commentForm" :rules="Rules">
                    <el-form-item label="评论类型:" prop="type">
                        <el-select v-model="commentForm.type" placeholder="请选择" size="large" style="width: 240px">
                            <el-option v-for="item in typeOptions" :key="item.value" 
                            :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="将要评论的标题编号" prop="titleId">
                        <el-input placeholder="请输入" v-model="commentForm.titleId" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="父评论编号(默认无)" prop="pid">
                        <el-input placeholder="请输入该评论回复的评论编号" v-model="commentForm.pid" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="父评论的用户编号(默认无)" prop="toCommentUserId">
                        <el-input placeholder="请输入该评论回复的评论人编号" v-model="commentForm.toCommentUserId" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <TextEditor v-model="commentForm.content" />
                    </el-form-item>
                    
                </el-form>
                <!-- 按钮设置 -->
                <div>
                    <el-button @click="cancelDrawer(); clearCommentForm()">取消</el-button>
                    <el-button type="primary" @click="onAdd()">
                        添加
                    </el-button>
                </div>
            </div>
        </el-drawer>

    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}</style>